<template>
  <div>
    <div class="nav-bar">
      <div>
        <div class="left" @click="gohome">
          <img src="../../../assets/goleft.svg" alt="" />
        </div>
      </div>
      <div class="center">AddTask</div>
      <div class="right">
        <!-- <img src="../../../assets/add.svg" alt="" /> -->
      </div>
    </div>
    <div class="body">
      <div class="title1"><span>任务内容:</span><span style="color:red;">*</span></div>
      <div class="content">
        <input type="text" placeholder="请输入任务内容" />
      </div>
      <div class="type"><span  class="title1">任务类型:</span><span style="color:red;">*</span>
      <select name="taskType" id="taskType" class="taskType">
        <option value="one" class="option">个人任务</option>
        <option value="two" class="option">伙伴协同任务</option>
        <option value="three" class="option">社区监督任务</option>
      </select>
      </div>
      <div class="friend"><span  class="title1">选择伙伴:</span>
      <select name="friends" id="friends" class="friends">
        <option value="one" class="option">friend1</option>
      </select>
      </div>
      <div style="margin-top:5px;"><img src="../../../assets/fighting.svg" alt=""></div>
      <div style="width:100%;">
        <div class="sendBtn"><button class="sendTask">发布</button></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    gohome() {
      this.$router.replace("/home");
    },
  },
};
</script>

<style>
.nav-bar {
  display: flex;
  height: 44px;
  line-height: 44px;
  text-align: center;
  box-shadow: 0 1px 1px rgba(100, 100, 100, 0.301);
  font-size: 18px;
  font-family: "Arial", "Microsoft YaHei", "黑体", "宋体", sans-serif;
  box-shadow: darkgray;
  /* background-color: coral; */
}
.left,
.right {
  width: 60px;
  height: 44px;
  line-height: 44px;
}
.left img,
.right img {
  width: 24px;
  height: 24px;
  margin-top: 10px;
}
.center {
  flex: 1;
}
.body{
  width: 97%;
  height: 100%;
  border: 0.5px solid #f5657c;
  border-radius: 20px;
  margin-left: 1.5%;
  margin-top: 5px;
}
.title1 {
  width: 100%;
  height: 50px;
  font-size: 20px;
  margin-top: 10px;
  margin-left: 10px;
}
.content {
  width: 100%;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
}
.content input {
  width: 85%;
  height: 100%;
}
.type{
  width: 100%;
  height: 100px;
  line-height: 100px;
}
.taskType{
  width: 230px;
  height: 30px;
  margin-left: 10px;
}
.friends{
  width: 230px;
  height: 30px;
  margin-left: 15px;
}
.sendBtn{
  width: 100%;
  height: 100px;
  text-align: center;
  /* margin-top: 300px; */
}
.sendBtn button{
  width: 180px;
  height: 50px;
  background-color: #65a3f5;
  border-radius: 20px;
  border: #000000 solid .5px;
}
</style>